<template>
  <div class="info_item">
    <el-card>
      <div class="title_view" @click="clickAllDistance" title="点击翻页">
        <div>
          <img src="@/assets/image/edt.png" alt="" />
          <span>业务状态</span>
        </div>
        <img src="@/assets/image/arrow.png" alt="" />
      </div>
      <div class="line_view"></div>
      <div class="switch_view">
        <div @click="clickSwitchAction(1)">
          <span :style="switchIndex == 1 ? actStyle : ''">待审批</span>
          <div :style="switchIndex == 1 ? '' : actBg"></div>
        </div>
        <div @click="clickSwitchAction(2)">
          <span :style="switchIndex == 2 ? actStyle : ''">已审批</span>
          <div :style="switchIndex == 2 ? '' : actBg"></div>
        </div>
      </div>
      <ToDoTitle ref="toDoTask" :taskType="switchIndex" />
    </el-card>
  </div>
</template>

<script>
  import ToDoTitle from "@/views/labdata/flowTask/todo_title.vue";
  export default {
    components: {
      ToDoTitle
    },
    data() {
      return {
        switchIndex: 1,
        actStyle: "color: #333; font-weight: 500",
        actBg: "background-color: #fff",
      };
    },
    props: {},
    computed: {},
    methods: {
      clickSwitchAction(index) {
        this.switchIndex = index;
        /* this.$emit('sendAction', {
          type: 'distance',
          index: index + 1
        }) */
      },
      clickAllDistance() {
        /* this.$emit('sendAction', {
          type: 'distance',
          index: 0
        }) */
        this.$refs["toDoTask"].changePage();
      },
      clickDistanceDetail(item) {
        /* this.$emit('sendAction', {
          type: 'distance',
          index: 4,
          item: item
        }) */
      }
    },
  };
</script>

<style lang="scss" scoped>
  .info_item {
    width: 25rem;
    height: 24.375rem;
    margin-top: 0.94rem;
  }

  .el-card {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .title_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }

  .title_view img {
    width: 0.625rem;
    height: 0.94rem;
  }

  .title_view div img {
    width: 0.94rem;
    height: 0.94rem;
  }

  .title_view div span {
    font-size: 1.125rem;
    color: rgb(237, 111, 45);
    margin-left: 1rem;
  }

  .line_view {
    background-color: #ddd;
    height: 0.06rem;
    margin-top: 1rem;
  }

  .switch_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
  }

  .switch_view div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .switch_view div span {
    font-size: 1.125rem;
    color: #666;
  }

  .switch_view div div {
    width: 2.7rem;
    height: 0.225rem;
    background-color: rgb(237, 111, 45);
  }
</style>
